<template>
	<el-form :model="form" :rules="rules" ref='theForm' style='width: 100%;height: auto;'>
		<div class="question_type" :class="allshow?'question_typeall':''">
			<span v-for='item in questionTypes' v-if="item.value == form.questionType">{{item.name}}</span>
		</div>
		<div class="question_title" :class="allshow?'question_titleall':''">
			<div class="question_titleindex" v-if='form.indexId && !allshow'>
				<span>{{form.indexId}}、</span>
			</div>
			<div class="question_titlereal editor_box" v-html="form.question"></div>
			<div class="question_type" v-if="false">（<span v-for="(item,index) in questionTypes" v-if="item.value == form.questionType">{{item.name}}</span>）</div>
			<div class="question_score" v-if="hasScore && form.score && !form.userScore">（{{form.score}}分）</div>
			<div class="question_score" v-if="hasScore && form.score && form.userScore">（{{form.score}}分，得{{form.userScore}}分）</div>
		</div>
		<div class="question_options" :class="allshow?'question_optionsall':''" v-if='getScore' >
			<el-form-item label="分数：" prop="score" >
				<el-col :span="22">
					<el-input-number v-model="form.score" @change='scoreChange' :min='0' :step="1" step-strictly label="请输入分数" size='small'></el-input-number>
				</el-col>
			</el-form-item>
		</div>
		<div class="question_options" :class="allshow?'question_optionsall':''">
			<el-radio-group v-model="form.userAnswer" @change="answerChange('SINGLE')" :disabled='readonly' v-if="form.questionType == 'SINGLE'">
				<div class="question_option" v-for="(item,index) in form.optionsArr">
					<el-radio :label="letters[index]">
						<div class="question_optiontext">
							<span class="editor_letter">{{letters[index]}}.</span>
							<span class="editor_box" v-html="item"></span>
						</div>
					</el-radio>
				</div>
			</el-radio-group>
			<el-checkbox-group v-model="form.userAnswers" @change="answerChange('MULTIPLE')" :disabled='readonly' v-if="form.questionType == 'MULTIPLE'">
				<div class="question_option" v-for="(item,index) in form.optionsArr">
					<el-checkbox :label="letters[index]">
						<div class="question_optiontext">
							<span class="editor_letter">{{letters[index]}}.</span>
							<span class="editor_box" v-html="item"></span>
						</div>
					</el-checkbox>
				</div>
			</el-checkbox-group>
			<el-radio-group v-model="form.userAnswer" @change="answerChange('SINGLE')" :disabled='readonly' v-if="form.questionType == 'JUDGE'">
				<div class="question_option" v-for="(item,index) in form.optionsArr">
					<el-radio :label="item">
						<div class="question_optiontext">
							<span class="editor_box" v-html="item"></span>
						</div>
					</el-radio>
				</div>
			</el-radio-group>
		</div>
		<div class="question_answer" v-if="showanswer" :class="allshow?'question_answerall':''">
			<div v-if="form.answer" class="question_answer_resultother">
				【正确答案】<span class="editor_box" v-html='form.answer'></span>
			</div>
			<div v-if="form.difficulty" class="question_answer_resultother">
				<span>【难度】</span><span v-for='item in difficultys' v-if="item.value == form.difficulty">{{item.name}}</span>
			</div>
			<div v-if="form.analysis" class="question_answer_resultother">
				<span>【解析】</span><span class="editor_box" v-html='form.analysis'></span>
			</div>
		</div>
	</el-form>
</template>

<script>
	export default {
		props: {
			form: {
				type: Object,
				required: true,
				default: () => ({})
			},
			readonly: {
				type: Boolean,
				required: false,
				default: false
			},
			allshow: {
				type: Boolean,
				required: false,
				default: false
			},
			hasScore: {
				type: Boolean,
				required: false,
				default: false
			},
			showanswer: {
				type: Boolean,
				required: false,
				default: false
			},
			showuseranswer: {
				type: Boolean,
				required: false,
				default: false
			},
			getScore: {
				type: Boolean,
				required: false,
				default: false
			},
		},
		data() {
			return {
				letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
				questionTypes: [{
					name: '单选题',
					value: 'SINGLE'
				}, {
					name: '多选题',
					value: 'MULTIPLE'
				}, {
					name: '判断题',
					value: 'JUDGE'
				}],
				difficultys: [{
					name: '简单',
					value: 'SIMPLE'
				}, {
					name: '中等',
					value: 'MEDIUM'
				}, {
					name: '困难',
					value: 'DIFFICULTY'
				}],
				rules: {
					userAnswer: [{
						required: true,
						message: '请填写答案'
					}],
				},
			}
		},
		created() {
			this.jsonObject();
		},
		methods: {
			jsonObject() {
				var form = this.form;
				if(form.options) {
					var optionObject = JSON.parse(form.options);
					this.form.optionsArr = Object.values(optionObject);
				} else {
					this.form.optionsArr = [];
				}
			},
			answerChange(type) {
				if(type == 'MULTIPLE') {
					var userAnswers = this.form.userAnswers;
					if(userAnswers && userAnswers.length > 0) {
						userAnswers = userAnswers.sort()
						this.form.userAnswer = userAnswers.join('')
					} else {
						this.form.userAnswer = ''
					}
				}
				if(type == 'COMPLETION') {
					var flag = this.form.userAnswers.filter(item => {
						return !item
					})
					if(flag.length > 0) {
						this.form.userAnswer = ''
					} else {
						this.form.userAnswer = this.form.userAnswers.join(',')
					}
				}
				if(this.form.userAnswer) {
					this.form.overed = true
				} else {
					this.form.overed = false
				}
				this.$emit('checkOver',this.form.userAnswer);
			},
			scoreChange() {
				this.$emit('scoreChange');
			},
		}
	}
</script>